<template>
    <div>
        <el-card class="box-card" style="margin-top:20px;padding:0px;">
            <!-- 用户登入报表 -->
            <div id="loginReport" style="width: 650px;height:270px;"></div>
        </el-card>
    </div>
    <!-- <div class="homeWelcome">欢迎来到MarkToTop线上办公系统</div> -->
</template>

<script>
export default {
    data() {
        return {
            xData: [],
            yData: [],
            myData: [],
            value: new Date(),
            userinfo:{
                username:'admin'
            }
            
        }
    },
    methods: {
        /**
         * 加载登入报表数据
         */
        async loginReport(username) {
            // const { data: res } = await this.$http.post("system/loginLog/loginReport", {
            //     username: username
            // });
            const { data: res } = await this.postRequest('/system/loginLog/loginReport',this.userinfo);
            if(!res){
                return this.$message.error("获取登入报表数据失败");
            } else {
                const $this = this;
                this.xData = [];
                this.yData = [];
                this.myData = [];
                res.result.all.forEach(e1 => {
                    $this.xData.push(e1.days);
                    $this.yData.push(e1.count);
                });

                for (let i = 0; i < this.xData.length; i++) {
                    let count = 0;
                    for (let j = 0; j < res.result.me.length; j++) {
                        if ($this.xData[i] === res.result.me[j].days) {
                            count = res.result.me[j].count;
                            break;
                        } else {
                            count = 0;
                        }
                    }
                    $this.myData.push(count);
                }
            }
            this.draw();
        },

        /**
         * 绘制登入报表
         */
        draw() {
            const myChart = this.$echarts.init(document.getElementById("loginReport"));
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: "用户登入统计"
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none"
                        },
                        dataView: {readOnly: false}, //  缩放
                        magicType: {type: ["bar", "line"]}, ///　　折线  直方图切换
                        restore: {}, // 重置
                        saveAsImage: {} // 导出图片
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#eee'
                        }
                    }
                },
                legend: {
                    type: 'plain',
                    data: ["全部", "我"]
                },
                xAxis: {
                    data: this.xData
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "全部",
                        data: this.yData,
                        type: "bar",
                        showBackground: true,
                        animationDuration: 1500,
                        animationEasing: "cubicInOut",
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(30, 144, 255，0.5)'
                        },
                    },
                    {
                        name: "我",
                        data: this.myData,
                        type: "bar",
                        showBackground: true,
                        animationDuration: 2000,
                        animationEasing: "cubicInOut"
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    mounted() {
        this.loginReport(this.username);
        this.draw();
    }
}
</script>

<style scoped>
.homeWelcome{
    text-align: center;
    font-size: 40px;
    font-family: 华文行楷;
    color: #409eff;
    padding-top: 200px;
}
</style>